import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/graphic/lit-stroke-animation.ts"
import {StrokeAnimationProps} from "../../../echarts/graphic/lit-stroke-animation.ts";

const meta: Meta<StrokeAnimationProps> = {
    title: 'Echarts/LitStrokeAnimation',
    tags: ['autodocs'],
    render: (args: StrokeAnimationProps): TemplateResult => {
        return html`<lit-stroke-animation 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .text=${args.text}
            .fontSize=${args.fontSize}
            .strokeColor=${args.strokeColor}
            .fillColor=${args.fillColor}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        text: { control: 'text' },
        fontSize: { control: 'number' },
        strokeColor: { control: 'color' },
        fillColor: { control: 'color' },
    },
};

export default meta;
type Story = StoryObj<StrokeAnimationProps>;

export const Default: Story = {
    args: {
        chartId: 'basic-stroke-animation-chart',
        width: '600px',
        height: '400px',
        text: 'Hello World',
        fontSize: 80,
        strokeColor: '#000',
        fillColor: '#000',
    }
};